<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>找回密码</title>
    <link href="${pageContext.request.contextPath}/static/images/houserent.ico" rel="icon">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/module/admin.css?v=318"/>
</head>
<body class="layui-layout-body close-footer theme-pink">
<div class="layui-fluid">
    <div class="layui-card" style="height:500px">
        <div class="layui-card-header"><h2 style="text-align: center">找回密码</h2></div>
        <div class="layui-card-body">
            <div class="layui-tab layui-steps layui-steps-readonly" lay-filter="retrievePassword"
                 style="max-width: 600px;">
                <ul class="layui-tab-title">
                    <li class="layui-this">
                        <i class="layui-icon layui-icon-ok">1</i>
                        <span class="layui-steps-title">第一步</span>
                        <span class="layui-steps-content">填写注册邮箱</span>
                    </li>
                    <li>
                        <i class="layui-icon layui-icon-ok">2</i>
                        <span class="layui-steps-title">第二步</span>
                        <span class="layui-steps-content">获取邮箱验证码</span>
                    </li>
                    <li>
                        <i class="layui-icon layui-icon-ok">3</i>
                        <span class="layui-steps-title">第三步</span>
                        <span class="layui-steps-content">修改登录密码</span>
                    </li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" style="padding: 35px 150px 10px 60px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮箱号:</label>
                                <div class="layui-input-block">
                                    <input type="text" name="email" class="layui-input" placeholder="请输入邮箱"
                                           lay-verify="required|email" autocomplete="off" required />
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-fluid layui-btn-radius"
                                            lay-filter="emailSubmit" lay-submit>下一步
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form" style="padding: 35px 150px 10px 60px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">验证码:</label>
                                <div class="layui-input-block">
                                    <input  type="text" name="captcha" class="layui-input" placeholder="请输入验证码"
                                            lay-verify="required" autocomplete="off" required />
                                    <button style="position: absolute;right: 0;top: 0;" type="button"
                                            id="captcha" class="layui-btn layui-btn-primary">获取验证码
                                    </button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button data-steps="prev" type="button"
                                            class="layui-btn layui-btn-primary layui-btn-radius">上一步
                                    </button>
                                    <button class="layui-btn layui-btn-radius" lay-filter="captchaSubmit"
                                            lay-submit>下一步
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-tab-item">
                        <form class="layui-form" style="padding: 35px 150px 10px 60px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">新密码:</label>
                                <div class="layui-input-block">
                                    <input type="password" name="newpassword" required lay-verify="required"
                                           placeholder="请输入新密码" autocomplete="off" class="layui-input"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">确认密码:</label>
                                <div class="layui-input-block">
                                    <input type="password" name="newpassword1" required lay-verify="required"
                                           autocomplete="off" class="layui-input"placeholder="请再次输入新密码"/>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button data-steps="next" type="button"
                                            class="layui-btn layui-btn-primary layui-btn-radius">取消修改
                                    </button>
                                    <button class="layui-btn layui-btn-radius" lay-filter="passwordSubmit"
                                            lay-submit>修改密码
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/common.js?v=318"></script>
<script>
    layui.use(['layer', 'steps', 'form', 'admin', 'formX'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var steps = layui.steps;
        var form = layui.form;
        var admin = layui.admin;
        var formX = layui.formX;

        var eamil;
        var captcha;
        // 填写邮箱
        form.on('submit(emailSubmit)', function (data) {
            $.ajax({
                url:'${pageContext.request.contextPath}/user/email',
                data: data.field,
                dataType:'json',
                type:'post',
                success:function (res) {
                    if(res.code == 0){
                        eamil = res.data.email;
                        captcha = res.data.captcha;
                    }
                },
                error:function () {
                    layer.msg('请求失败');
                }
            })
            admin.btnLoading('[lay-filter="emailSubmit"]');
            setTimeout(function () {
                admin.btnLoading('[lay-filter="emailSubmit"]', false);
                steps.next('retrievePassword');
                formX.startTimer('#captcha', 60, function (t) {
                    return '已发送(' + t + 's)';
                });
            }, 600);
            return false;
        });

        $("#captcha").click(function () {
            $.ajax({
                url:'${pageContext.request.contextPath}/user/email',
                data: {email:email},
                dataType:'json',
                type:'post',
                success:function (res) {
                    if(res.code == 0){
                        eamil = res.data.email;
                        captcha = res.data.captcha;
                    }
                },
                error:function () {
                    layer.msg('请求失败');
                }
            })
        })

        // 获取验证码
        form.on('submit(captchaSubmit)', function (data) {
            if (data.field.captcha != captcha){
                layer.msg("验证码错误！");
                return false;
            }
            admin.btnLoading('[lay-filter="captchaSubmit"]');
            setTimeout(function () {
                admin.btnLoading('[lay-filter="captchaSubmit"]', false);
                steps.next('retrievePassword');
            }, 600);
            return false;
        });

        // 修改登录密码
        form.on('submit(passwordSubmit)', function (data) {
            data.field.email = eamil;
            if (data.field.newpassword != data.field.newpassword1) {
                layer.msg("两次密码输入不一致");
                return false;
            }
            $.ajax({
                url: '${pageContext.request.contextPath}/user/forget',
                data: data.field,
                dataType: 'json',
                type: 'post',
                success: function (res) {
                    if(res.code == 0){
                        layer.msg(res.msg,{icon: 6},function () {
                            window.location.href = "${pageContext.request.contextPath}/jsp/login.jsp";
                        })
                    }else{
                        layer.msg(res.msg,{icon: 5})
                    }
                },
                error: function () {
                    layer.msg("请求失败");
                }
            })
            return false;
        });

    });
</script>
</body>
</html>